<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="../assets/mobile/comm.css" rel="stylesheet" type="text/css" />
<link href="../assets/mobile/goods.css" rel="stylesheet" type="text/css" />
<link href="../assets/mobile/top.css" rel="stylesheet" type="text/css" />
<script src="../assets/js/mobile/jquery190.js" type="text/javascript"></script>
<link rel="stylesheet" href="../assets/agile/css/ratchet/css/ratchet.min.css">
<link rel="stylesheet" href="../assets/agile/css/flat/flat.component.css">
<link rel="stylesheet" href="../assets/agile/css/flat/iconline.css">
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/local.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../assets/js/mobile/BottomFun.js"></script>
<script src="../assets/js/mobile/goodsInfoFun.js" type="text/javascript"></script>
<script src="../assets/js/mobile/GoodsPicSlider.js" type="text/javascript"></script>
<script src="../assets/js/mobile/PeriodSlider.js" type="text/javascript"></script>
<style>
body{
	position:inherit;
}.titleloading{box-shadow: 0px 0px 0px !important;background:#fff;}
.pCountdown{padding:0;}.pProcess{border: none;box-shadow: 0px 0px 0px;border-radius:0;margin:0;}
</style>
</head>
<body>
<div class="h5-1yyg-v1" id="loadingPicBlock">
<div id="ios-top-box">
    <!-- 栏目页面顶部 -->
    <div id="header" class="bar bar-nav">
    <div class="titlebar">
    <a href="javascript:appClose('item',api);"><i class="iconfont iconline-arrow-left"></i></a>
    <h1 class="title">商品详情</h1>
    </div>
    </div>
</div>

<input type="hidden" name="price" value="1" id="goprice"/>

<!-- 内页顶部 -->
	<section class="goodsCon pCon" style="margin-top:64px;">
	    <!-- 导航 -->
        <div id="divPeriod" class="pNav">
            <div class="loading"><b class="loading-img"></b>正在加载</div>
    	    <ul class="slides"></ul>
        </div>

		<!-- 揭晓倒计时 -->
			<div id="divLotteryTime" class="pProcess clearfix" style="display:none;" data-id="0" data-endtime="0">
				<div class="pCountdown">
					<div class="g-snav">
                        <div class="g-snav-lst" style="height:73px;">揭晓<br>倒计时<s></s></div>
                        <div class="g-snav-lst"><b class="minute">99</b><em>分</em></div>
                        <div class="g-snav-lst"><b class="second">99</b><em>秒</em></div>
                        <div class="g-snav-lst"><b class="millisecond">99</b><em>毫秒</em></div>
					</div>
				</div>
			</div>

        <!-- 产品图 -->
        <div class="pPic pPicBor" style="padding-top:5px;">
            <div class="pPic2">
    	        <div id="sliderBox" class="pImg">
                    <div class="loading"><b class="loading-img"></b>正在加载</div>
                    <ul class="slides">
					<li><img class="lazy" data-original="" class="animClass" /></li>
                    </ul>
                </div>
            </div>
			
            <span id="spAutoFlag" style="display:none;" class="z-limit-tips">限时揭晓</span>
		
        </div>

        <!-- 条码信息 -->
        <div class="pDetails pDetails-end" style="border:none;padding-top:0px;">
                <div class="loading titleloading"><b class="loading-img"></b>正在加载</div>
                <p class="price">价值：<em class="arial gray">￥0.00</em></p>
				<progress max="100" value="0" class="css3" title="已完成0%">
					<div class="progress"></div>
				</progress>
				<div class="Progress-bar">
					<ul class="Pro-bar-li">
						<li class="P-bar01"><em class="canyurenshu">0</em>已参与</li>
						<li class="P-bar02"><em class="zongrenshu">0</em>总需人次</li>
						<li class="P-bar03"><em class="yurenshu">0</em>剩余</li>
					</ul>
				</div>

		  <div class="pClosed" style="display:none;">商品正在揭晓...</div>
          <div id="btnBuyBox" class="pBtn" codeid="0">
			<a href="javascript:;" class="fl buyBtn">立即抢购</a>
			<a href="javascript:;" class="fr addBtn">加入购物车</a>
		  </div>

        </div>
        <!-- 参与记录，商品详细，晒单导航 -->
	
        <div class="joinAndGet">
			<ul class="table-view" style="border-bottom:0px;">
			  <li class="table-view-cell">
			    <a class="navigate-right" id="buyrecord" href="javascript:;">所有抢购记录</a>
			  </li>
			  <li class="table-view-cell">
			    <a class="navigate-right" id="goodsdesc" href="javascript:;">图文详情</a>
			  </li>
			  <li class="table-view-cell">
			    <a class="navigate-right opGoodspost" href="javascript:;">已有<span class="orange arial sunOrder">0</span>个幸运者晒单<strong class="orange arial sunOrderCount">0</strong>条评论</a>
			  </li>
			</ul>
            <!-- 上期获得者 -->
			<ul id="prevPeriod" style="display:none;top:5px;margin:0 5px !important;"  class="prevUser m-round" codeid="" uweb="">
        	    <li class="fl"><s class="faceimg"></s><div><img class="lazy" data-original=""/></div></li>
                <li class="fr"><b class="z-arrow"></b></li>
                <li class="getInfo">
            	    <dd>
					<em class="blue"><a href="javascript:;" style="display:inline;position:static;" class="usernameText"></a></em>
					<span class="ip">(0.0.0.0)</span>
					</dd>
                    <dd>总共抢购：<em class="orange arial gonumber">0</em>人次</dd>
                    <dd>幸运抢购码：<em class="orange arial gropencode">10000001</em></dd>
                    <dd>揭晓时间：<span class="opencode_time">00:00:00</span></dd>
                    <dd>抢购时间：<span class="gocode_time">00:00:00</span></dd>
                </li>
            </ul>
        </div>
    </section>
</div>
<script type="text/javascript">
apiready = function(){
$(function(){
  var isAuto = {action : true};
  var goods_id = localData.get('goods_id');
  if(!goods_id) {
      api.alert({title:'提示',msg:'商品不存在'},function(btnIndex,err){
         api.closeWin({name:'item'});
      });
      return;
  }
    
  $('#buyrecord').click(function(){
      openItem('buyrecord',goods_id,function(){});
  });
  $('#goodsdesc').click(function(){
      openItem('goodsdesc',goods_id,function(){});
  });
  function loadscroller(){
        $("#divPeriod").touchslider();
        $("#sliderBox").picslider();
  }
  GetJPData(config.url+'/app.php?act=item',{goods_id:goods_id},function(data){   
    if(data['status'] == 1){
    	//alert(JSON.stringify(data));
    	if(data['item']['isFree'] == 1){
    		localData.set('f_goods_id',data['item']['id']);
    		localData.remove('goods_id');
    		api.openWin({name:'f_item',url:'./f_item.html',reload:true}); 
    		appClose('item',api);
			return;
    	}
    	
	  $('.opGoodspost').click(function(){
	  	  openItem('goodspost',data['item']['sid'],function(sid){
		  	localData.set('goodsSid',data['item']['sid']);
		  });
	  });
		
        var imgs = '';
        for(var i in data['item']['picarr']){
            imgs += '<li><img src="'+config.upload_url+'/'+data['item']['picarr'][i]+'" class="animClass" /></li>';
        }
        if(data['item']['picarr'] == ''){
            imgs += '<li><img src="'+config.upload_url+'/'+data['item']['thumb']+'" class="animClass" /></li>';
        }
        var list = '';
        for(var l in data['list']){
            list += data['list'][l];
        }
        $('.pNav .slides').append(list);
        $('.pImg .slides').html(imgs);
        $('.titleloading').remove();
        var goodsnamehtml = '<p class="goods_name">(第'+data['item']['qishu']+'期)'+data['item']['title']+'<span> <font style="'+data['item']['title_style']+'">'+data['item']['title2']+'</font></span></p>';
        $('.pDetails').css('paddingTop',10);
        $('.pDetails p.price').before(goodsnamehtml);
        $('p.price em').text('￥'+data['item']['money']);
        $('progress').attr('value',data['item']['progress']);
        $('progress').attr('title',data['item']['percent']);
        $('.canyurenshu').text(data['item']['canyurenshu']);
        $('.zongrenshu').text(data['item']['zongrenshu']);
        $('.yurenshu').text(data['item']['yurenshu']);
        $('#goprice').val(data['item']['yunjiage']);
        $('.sunOrderCount').text(data['sunOrder']['comment']);
        $('.sunOrder').text(data['sunOrder']['count']);
        $('#divLotteryTime').attr('data-id',goods_id);
        $('#divLotteryTime').attr('data-endtime',data['item']['autoTime']);
        if(data['item']['yurenshu'] == 0 && data['item']['autoTime']){
            isAuto.action = false;
            autoTimeShow(goods_id);
        }
        if(data['gorecode']['isEmpty']){
            $('.gocode_time').text(data['gorecode']['gorecode_time']);
            $('.gropencode').text(data['gorecode']['isEmpty']['q_user_code']);
            $('.opencode_time').text(data['gorecode']['opencode_time']);
            $('.gonumber').text(data['gorecode']['gorecode_count']);
            $('.prevUser').attr('codeid',data['gorecode']['isEmpty']['id']);
            $('.prevUser').attr('uweb',data['gorecode']['isEmpty']['q_uid']);
            $('s.faceimg').next().html('<img class="lazy" data-original="'+config.upload_url+'/'+data['gorecode']['isEmpty']['userimg']+'"/>');
            $('.usernameText').text(data['gorecode']['username']);
            $('.ip').text('('+data['gorecode']['ip']+')');
            $('.prevUser').show();
            lyzimg();
        }
        loadscroller();
    }else{
        
    }
  });

$('.prevUser').click(function(){
    var userid = $(this).attr('uweb');
    openItem('userindex',userid,function(id){
        localData.set('userid',id);
    });
});

//clearInterval(autoTime);
var autoTime = setInterval(function(){
    GetJPData(config.url+'/app.php?act=get_progress&tm='+new Date().getTime(),{goods_id:goods_id},function(data){
        if(data['status'] == 1){
            $('progress').attr('value',data['item']['progress']);
            $('progress').attr('title',data['item']['percent']);
            $('.canyurenshu').text(data['item']['canyurenshu']);
            $('.zongrenshu').text(data['item']['zongrenshu']);
            $('.yurenshu').text(data['item']['yurenshu']);
            $('#divLotteryTime').attr('data-id',goods_id);
            $('#divLotteryTime').attr('data-endtime',data['item']['autoTime']);
            if(data['item']['yurenshu'] == 0){
                clearInterval(autoTime);
                if(isAuto.action){
                    if(data['qishu']){
                        $('.slides li').eq(0).before(data['qishu']);
                    }
                    autoTimeShow(goods_id); 
                }
            }
        }
    });
},5000);
  
function autoTimeShow(goods_id){
    $('#btnBuyBox').hide();
    $('.pClosed').show();
	clearInterval(autoTime);
    //揭晓倒计时
    var divLotteryTime = $('#divLotteryTime');
    if (divLotteryTime.size() > 0 ) {
        divLotteryTime.fadeIn();
        var id = divLotteryTime.attr('data-id');
        var minute = divLotteryTime.find('b.minute');
        var second = divLotteryTime.find('b.second');
        var millisecond = divLotteryTime.find('b.millisecond');
        var times = (new Date().getTime()) + 1000 * divLotteryTime.attr('data-endtime');
        var timer = setInterval(function(){
            var time = times - (new Date().getTime());
            if ( time < 1 ) {
                clearInterval(timer);
                minute.parent().remove();
                second.parent().remove();
                millisecond.parent().remove();
                var checker = function(){
                    GetJPData(config.url+"/app.php?act=get_shop_info&tm="+new Date().getTime(),{'goods_id':goods_id},function(info){
                        if (info['status'] == 1) {
                            $('.pCountdown div.g-snav').html('<p style="width:100%;text-align:center;padding:10px 0;margin:0 auto;background:#f4f4f4;">揭晓成功！</p>');
                            setTimeout(function(){
                                openItem('dataserver',goods_id,function(goods_id){
                                    localData.set('goods_id',goods_id);
                                });
                            },1500);
                        } else {
                            $('.pCountdown div.g-snav').html('<p style="width:100%;text-align:center;padding:10px 0;margin:0 auto;background:#f4f4f4;">揭晓失败！</p>');
                            setTimeout(checker,1500);
                        }
                    });
                };
                setTimeout(checker,750);
                return;
            }
    
            i =  parseInt((time/1000)/60);
            s =  parseInt((time/1000)%60);
            ms =  String(Math.floor(time%1000));
            ms = parseInt(ms.substr(0,2));
            if(i<10)i='0'+i;
            if(s<10)s='0'+s;
            if(ms<10)ms='0'+ms;
            minute.html(i);
            second.html(s);
            millisecond.html(ms);
        }, 41);
    }
}

});

};
</script>
</body>
</html>